<template>
  <el-select
      multiple
      v-model="selectData"
      :placeholder="placeholder"
      :disabled="disabled"
      :clearable="clearable"
      @change="change"
      class="select"
  >
    <slot name="prefix" slot="prefix" />
    <el-option
        v-for="item in options"
        :key="item.value"
        :label="item.label"
        :value="item.value"
        :disabled="item.disabled"
    >
      <slot :item="item" />
    </el-option>
  </el-select>
</template>
<script>
export default {
  name: 'MultiSelect',
  props: {
    value: {
      type: [Number, String],
      default: null
    },
    options: {
      type: Array,
      default: () => [],
    },
    disabled: {
      type: Boolean,
      default: false,
    },

    placeholder: {
      type: String,
      default: '请选择',
    },
    clearable: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      selectData: null,
      dialogVisible: false,
      addData: {},
    };
  },
  watch: {
    value: {
      handler(val) {
        this.selectData = val?val.split(','):[];
      },
      immediate: true
    },
  },
  methods: {
    change(val) {
      const value = val ? val.join(',') : '';
      this.$emit('change', value);
      this.$emit('input', value);
    },
  },
};
</script>
<style lang="scss" scoped>
.select {
  width: 100%;
}
.el-select-dropdown__item.hover, .el-select-dropdown__item:hover{
  background-color: #B4C3DA ;
  color: #fff;
}
</style>
